<template>
  <div class="my-side-bar">
    <ul>
      <li>
        <router-link to="/">首页</router-link>
      </li>
    </ul>
    <div v-for="(item, index) of store.state.routeTree" :key="index">
      <MenuItem :item="item" />
    </div>
  </div>
</template>

<script setup>
import MenuItem from "./MenuItem.vue";
import { useStore } from "vuex";
const store = useStore();
</script>
<style>
.my-side-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  z-index: 1;
  padding: 90px 30px 90px 30px;
  box-sizing: border-box;
  background-color: #ededed;
}
</style>
